@distance: 50px;

.encoded-svg-background(@svg) {
	@url: `encodeURIComponent(@{svg})`;
    background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

.preloader {
    width: 20px;
    height: 20px;
    transform-origin: 50%;
    animation: preloader-spin 1s steps(12, end) infinite;
    &:after {
        display: block;
        width: 100%;
        height: 100%;
        content: "";
        .encoded-svg-background("<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='#6c6c6c' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='#l' opacity='.27'/><use xlink:href='#l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='#l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='#l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='#l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='#l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='#l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='#l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='#l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 100%;
    }
}

.sui-pull-to-refresh {
    margin-top: -1 * @distance;
    transition: transform .4s;
    &.refreshing {
        transform: translate3d(0, @distance, 0);
    }

    &.touching {
        transition-duration: 0s;
    }
}

.sui-pull-to-refresh-layer {
    height: @distance - 20px;
    line-height: @distance - 20px;
    padding: 10px;
    text-align: center;
    .down {
        display: inline-block;
    }

    .up, .refresh {
        display: none;
    }

    .sui-pull-to-refresh-arrow {
        display: inline-block;
        z-index: 10;
        width: 20px;
        height: 20px;
        margin-right: 4px;
        vertical-align: -4px;
        background: no-repeat center;
        background-size: 13px 20px;
        transition-duration: 300ms;
        transform: rotate(0deg) translate3d(0, 0, 0);
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40'><polygon points='9,22 9,0 17,0 17,22 26,22 13.5,40 0,22' fill='#8c8c8c'/></svg>");
    }

    .sui-pull-to-refresh-preloader {
        display: none;
        vertical-align: -4px;
        width: 20px;
        height: 20px;
        margin-right: 4px;
        transform-origin: 50%;
        animation: preloader-spin 1s steps(12, end) infinite;
        .preloader;
    }
}

.pull-up, .refreshing {
    .sui-pull-to-refresh-layer .down {
        display: none;
    }
}

.pull-up .sui-pull-to-refresh-layer {
    .sui-pull-to-refresh-arrow {
        display: inline-block;
        transform: rotate(180deg) translate3d(0, 0, 0);
    }
    .up {
        display: inline-block;
    }
}

.pull-down .sui-pull-to-refresh-layer {
    .sui-pull-to-refresh-arrow {
        display: inline-block;
    }
    .down {
    display: inline-block;
    }
}

.refreshing .sui-pull-to-refresh-layer {
    .sui-pull-to-refresh-arrow {
        display: none;
    }

    .sui-pull-to-refresh-preloader {
        display: inline-block;
    }

    .refresh {
        display: inline-block;
    }
}

@keyframes preloader-spin {
    100% {
        transform: rotate(360deg);
    }
}

.sui-tab-bd-item.sui-pull-to-refresh {
	position: absolute;
	top: 50px;
}